<template>
  <div class="bg3-fixed"></div>


    <el-container class="search-container">

      <el-header class="logo">
            <!-- <img src="@/assets/logo1.png" alt="logo"> -->
      </el-header>

      <el-main class="main">
        <div class="search">
          <input type="text" name="" :value="message" @input="updateMessage" id="myInput" placeholder="请输入追溯码查询">
          <button title="查询" @click="checkInput()"><img src="@/assets/search1.png" alt=""></button>
        </div>
        <div class="example">
          <i>R154583290060576 （示例）</i>
        </div>

        <div class="content">
          <h1>
          欢迎来到基于GAP的农产品质量安全信息服务系统
          </h1>
          <div class="column1">
            <div class="left">
              <ul>
                <li>
                  <a href="#" title="无公害农产品" class="image-link"><img src="@/assets/1.png" alt=""></a>
                  <h3>无公害农产品</h3>
                  <p>无污染、无毒害、安全的食品</p>
                </li>
                <li>
                  <a href="#" title="绿色产品" class="image-link"><img src="@/assets/2.png" alt=""></a>
                  <h3>绿色产品</h3>
                  <p>无污染、优质、营养食品</p>
                </li>
                <li>
                  <a href="#" title="有机农产品" class="image-link"><img src="@/assets/3.png" alt=""></a>
                  <h3>有机农产品</h3>
                  <p>纯天然、高品味、高质量的食品</p>
                </li>
                <li>
                  <a href="#" title="农产品地理标志" class="image-link"><img src="@/assets/4.png" alt=""></a>
                  <h3>农产品地理标志</h3>
                  <p>特有农产品标志</p>
                </li>
              </ul>
            </div>
            <div class="right">
              <p>无公害农产品：是指产地环境和产品质量均符合国家普通加工食品相关卫生质量标准要求，经政府相关部门认证合格、并允许使用无公害标志的食品。所谓无公害食品是指无污染、无毒害、安全的食品。</p>
              <p>绿色食品：是指无污染、优质、营养食品，经国家绿色食品发展中心认可，许可使用绿色食品商标的产品。由于与环境保护有关的事物和我国通常都冠以“绿色”，为了更加突出这类食品出自良好的生态环境，因此称为绿色食品。</p>
              <p>
                有机农产品：是指根据有机农业原则，生产过程绝对禁止使用人工合成的农药、化肥、色素等化学物质和采用对环境无害的方式生产、销售过程受专业认证机构全程监控，通过独立认证机构认证并颁发证书，销售总量受控制的一类真正纯天然、高品味、高质量的食品。
              </p>
              <p>农产品地理标志:是指标示农产品来源于特定地域，产品品质和相关特征主要取决于自然生态环境和历史人文因素，并以地域名称冠名的特有农产品标志。</p>
            </div>
          </div>

          <div class="column2">
            <ul>
              <li><img src="@/assets/ag1.jpg" alt="" title="蘑菇"></li>
              <li><img src="@/assets/ag2.png" alt="" title="樱桃"></li>
              <li><img src="@/assets/ag3.png" alt="" title="梨子"></li>
              <li><img src="@/assets/ag4.jpg" alt="" title="柑橘"></li>
              <li><img src="@/assets/ag5.jpg" alt="" title="辣椒"></li>
              <li><img src="@/assets/ag6.png" alt="" title="茶叶"></li>
              <li><img src="@/assets/ag7.jpg" alt="" title="小麦"></li>
              <li><img src="@/assets/ag8.jpg" alt="" title="土豆"></li>
            </ul>
          </div>

        </div>
      </el-main>

      <el-footer>
        <div class="footer">
          <p>Copyright©2008-2023 All Rights Reserved</p>
          <p>版权所有©武汉网酷科技有限公司 | 地址：湖北省武汉市洪山区雄楚大街428号 | 邮编：430074 | 技术支持： <a href="#" title="中南民族大学工程技术中心">中南民族大学</a> <a
              href="#" title="中南民族大学工程技术中心">湖北省制造企业智能管理工程技术研究中心</a></p>
          <p><a href="#" title="鄂ICP备16008630号-1">鄂ICP备16008630号-1</a></p>
        </div>
      </el-footer>

    </el-container>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'

const router = useRouter()

const message = ref('')

function updateMessage(event) {
  message.value=event.target.value
}

function checkInput() 
  {
  const inputValue = message.value;

  // 检查输入框中的值是否为示例
  if (inputValue === "R154583290060576") {
    // 跳转到另一个页面
    router.push("/productInfo")
  } else {
    // 内容不匹配，给出提示信息
    ElNotification({
            message: '数据库暂时未录入该追溯码，请重新输入!',
            type: 'error',
            duration: 3000
          })
    // alert("数据库暂时未录入该追溯码，请重新输入。")
  }
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  /* 子盒子在父盒子中水平居中    1.父盒子*/
  text-align: center;
}
.bg3-fixed {
  background-image: url("@/assets/banner-7.png");
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 525px;
  z-index: -1;
  /* 将背景图片置于最底层 */
}

.logo {
  background-image: url("@/assets/logo1.png");
  background-size: cover;
  position: absolute;
  top: 100px;
  width: 210px;
  height: 220px;
} 

.search {
  width: 760px;
  height: 40px;
  background-color: #444;
  border: 1px solid #fff;
  border-radius: 3px;
  /* 子盒子在父盒子中水平居中   2.子盒子 */
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.search input {
  float: left;
  width: 720px;
  height: 38px;
  font-size: 18px;
  text-indent: 1.5em;
  background-color: #444;
  color: #fff;
}

.search button {
  float: right;
  width: 35px;
  height: 35px;
  padding-top: 6px;
  padding-right: 8px;
}

.example {
  color: #fff;
  font-weight: 700;
  margin-top: 16px;
}

.example i:hover {
  cursor: pointer;
}

.main {
  margin-top: 400px;
}

.content {
  width: 1070px;
  /* padding-right: 15px;
  padding-left: 15px; */
  margin-right: auto;
  margin-left: auto;
}

.content h1 {
  font-size: 40px;
  font-weight: 400;
  margin: 60px 0;
}

.column1 {
  width: 1070px;
  height: 440px;
}

.left {
  float: left;
}

.left ul {
  width: 600px;
  height: 440px;
}

.left ul li {
  overflow: hidden;
  float: left;
  width: 300px;
  height: 220px;
}

.image-link {
  display: inline-block;
  text-align: center;
}

.left ul li img {
  transition: all 0.3s;
}

.left ul li img:hover {
  transform: scale(0.9);
}

.left ul li h3 {
  padding: 8px;
}

.right {
  float: left;
  padding-left: 25px;
}

.right p {
  width: 425px;
  text-align: left;
  margin-bottom: 40px;
}

.right p:nth-child(4) {
  margin-bottom: 0;
}

.column2 {
  height: 582px;
  margin-top: 50px;
}

.column2 ul li {
  float: left;
  margin-right: 11px;
  margin-bottom: 11px;
}

.column2 ul li:nth-child(4n) {
  margin-right: 0;
}

.column2 ul li img {
  display: block;
  width: 259px;
  height: 259px;
}

.footer {
  width: 100%;
  height: 104px;
  color: #fff;
  background-color: #4d4d4d;
  padding-top: 20px;
}

.footer a {
  color: #fff;
}

.footer a:hover {
  text-decoration: underline;
}
</style>